<template>
  <div>
    <!-- <div style="text-align: center; line-height: 32px">催交/监造报表</div> -->

    <div>
      <TimeInterval label="合同签订日期" v-model="contractDate"></TimeInterval>
    </div>

    <div class="chart-box">
      <div class="title">进度表</div>
      <commonEcharts :option="option" :width="width"></commonEcharts>
      <div class="process-range">
        <div class="range-line">
          <div class="icon" style="background-color: #3354f4"></div>
          <div class="text">催交派单进度</div>
          <div class="rate">65%</div>
        </div>
        <div class="range-line">
          <div class="icon" style="background-color: #954500"></div>
          <div class="text">监造派单进度</div>
          <div class="rate">55%</div>
        </div>
        <div class="range-line">
          <div class="icon" style="background-color: #009553"></div>
          <div class="text">催交/监造进度</div>
          <div class="rate">45%</div>
        </div>
      </div>
    </div>

    <div class="main-box">
      <commonTabs v-model="currentIndex" :navs="tabs">
        <template v-for="(item, index) in tabs" :key="index" v-slot:[index]>
          <component
            :is="item.is"
            :actived="currentIndex == index"
            :type="item.type"
          />
        </template>
      </commonTabs>
    </div>

    <CommonFloatMenu :columns="menuColumns"></CommonFloatMenu>
  </div>
</template>
  
  <script>
import { defineComponent, ref, shallowRef, onMounted } from "vue";
import CommonFloatMenu from "@/components/common-float-menu/index.vue";
import CommonEcharts from "@/components/common-echarts/index.vue";
import CommonTabs from "@/components/common-tabs/index.vue";

import { Classify, Abnormal } from "./module";
import { TimeInterval } from "@/module/longnows/components/index";
import { watch } from "vue";

const formatDate = (date) =>
  `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;

export default defineComponent({
  components: {
    CommonFloatMenu,
    CommonEcharts,
    CommonTabs,
    Classify,
    Abnormal,
    TimeInterval,
  },

  setup(props, { slots }) {
    const option = ref({});
    const width = ref(
      document.documentElement.clientWidth || document.body.clientWidth
    );

    const contractDate = ref([new Date(), new Date()]);
    watch(
      () => contractDate.value,
      (newValue, oldValue) => {
        try {
          const [start, end] = newValue;
          console.log(formatDate(start), formatDate(end));
        } catch (error) {}
      }
    );

    const currentIndex = ref(0);
    const tabs = ref([
      {
        title: "分类统计",
        is: shallowRef(Classify),
        type: 0,
      },
      {
        title: "异常预警",
        is: shallowRef(Abnormal),
        type: 1,
      },
    ]);

    const menuColumns = ref([
      {
        title: "返回",
        colProps: {
          background: " #2751a6",
        },
        onClick: () => {
          window.history.back();
        },
      },
    ]);

    const placeItemStyle = {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      itemStyle: {
        color: "#cbccd0",
      },
      emphasis: {
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    };

    onMounted(() => {
      console.log("xxx");
      setTimeout(() => {
        option.value = {
          // tooltip: {},
          // legend: {
          //   orient: "vertical",
          //   left: "right",
          //   top: "center",
          //   data: ["催交派单进度", "监造派单进度", "催交/监造放行"],
          // },
          // yAxis: {},
          series: [
            {
              name: "催交/监造报表",
              type: "pie",
              radius: ["65%", "70%"],
              center: ["50%", "50%"],
              color: ["#afdd8a", "#cbccd0"],
              zlevel: 1,
              label: {
                normal: {
                  position: "inner",
                  show: false,
                },
              },
              hoverAnimation: false, //鼠标移入变大
              data: [
                {
                  value: 66,
                  name: "催交派单进度",
                  itemStyle: {
                    color: "#3354F4",
                    //   borderRadius: 15,
                  },
                },
                {
                  value: 34,
                  name: "",
                  ...placeItemStyle,
                },
              ],
            },
            {
              name: "催交/监造报表",
              type: "pie",
              radius: ["49%", "55%"],
              center: ["50%", "50%"],
              color: ["#00BDAE", "#cbccd0"],
              zlevel: 2,
              label: {
                normal: {
                  position: "inner",
                  show: false,
                },
              },
              hoverAnimation: false, //鼠标移入变大
              data: [
                {
                  value: 77,
                  name: "监造派单进度",
                  itemStyle: {
                    color: "#954500",
                    // borderRadius: 15,
                  },
                  labelLine: {
                    length: 45,
                  },
                },
                {
                  value: 23,
                  name: "",
                  ...placeItemStyle,
                },
              ],
            },
            {
              name: "催交/监造报表",
              type: "pie",
              radius: ["34%", "40%"],
              center: ["50%", "50%"],
              color: ["#efb754", "#cbccd0"],
              zlevel: 3,
              label: {
                normal: {
                  position: "inner",
                  show: false,
                },
              },
              hoverAnimation: false, //鼠标移入变大
              itemStyle: {
                color: "#009553",
                //   borderRadius: 15,
              },
              data: [
                {
                  value: 56,
                  name: "催交/监造放行",
                  labelLine: {
                    length: 70,
                  },
                },
                {
                  value: 44,
                  name: "",
                  ...placeItemStyle,
                },
              ],
            },
          ],
        };
      }, 50);
    });

    return {
      contractDate,
      currentIndex,
      tabs,
      width: width,
      option,
      menuColumns,
    };
  },
});
</script>
  
  
  <style lang="less"  scoped>
* {
  margin: 0;
  padding: 0;
}
.chart-box {
  box-shadow: 0 1px 8px 0 #ebedf0;
  width: calc(100% - 30px);
  margin: 15px auto;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  .title {
    color: #1e1f4b;
    font-weight: 600;
    text-align: center;
    line-height: 40px;
    transform: translateY(20px);
  }
}

.process-range {
  transform: translateY(-20px);
  .range-line {
    display: flex;
    justify-content: center; /* 垂直居中 */
    padding: 5px 10px;
    font-size: 14px;
    .icon {
      width: 12px;
      height: 12px;
      border-radius: 6px;
      align-self: center;
      margin-right: 10px;
    }
    .text {
      color: #77838f;
    }
    .rate {
      margin-left: 40%;
      font-size: 16px;
    }
  }
}

.main-box {
  padding: 10px 15px;
}
</style>